<template>
  <div class="message" v-show="book">
    <el-input
      v-model="data.netname"
      maxlength="5"
      show-word-limit
      placeholder="您的网名"
    />
    <el-input
      v-model="data.msg"
      maxlength="30"
      show-word-limit
      placeholder="输入您想说的话"
    />

    <el-button :disabled="data.canGet" @click="sendMsg">
      {{ data.btnText }}
    </el-button>
  </div>
  <el-scrollbar height="520px" style="margin-top: 10px">
    <div
      class="messages"
      v-for="(item, index) in data.arrMsg"
      :key="index"
      :style="{
        color:
          '#' +
          Math.floor(Math.random() * 0xffffff)
            .toString(16)
            .padEnd(6, '0'),
        backgroundColor:store.theme === false ? '#f4f4f5c5' :'#ffffff30'
      }"
    >
      <p class="name">{{ item.name }}</p>
      <span>发表了留言</span>
      <h4>{{ item.content }}</h4>
      <span v-show="book">{{ item.createdAt.split("T")[0] }}</span>
      <el-button
        v-show="!book"
        type="danger"
        :icon="Delete"
        circle
        @click="handleDelete(item)"
      />
    </div>
  </el-scrollbar>
</template>

<script setup>
import URL from "@/api/url";
import axios from "axios";
import { Delete } from "@element-plus/icons-vue";
import fn from "@/tools/timer.js";
import {useHomeStore} from '@/stores/home.js'
import { ref, reactive, onMounted, defineProps, toRefs } from "vue";
const store = useHomeStore()
const props = defineProps({
  //子组件接收父组件传递过来的值
  book: Boolean,
});
const { book } = toRefs(props);
const data = reactive({
  netname: "",
  msg: "",
  arrMsg: [],
  canGet: false,
  time: 0,
  btnText: "发表留言",
  timer: null,
});
const handleDelete = (item) => {
  axios.delete(URL() + `/msg/delMsg/${item._id}`).then((item) => {
    if (item.data.code === 20000) {
      ElMessage({
        showClose: true,
        message: item.data.message,
        type: "success",
      });
      findmsg();
    }
  });
};
const getCode = () => {
  data.canGet = true;
  data.time = 30;
  timer1();
};
const timer1 = () => {
  if (data.time > 0) {
    data.time--;
    data.btnText = data.time + "s后再次发表";
    data.timer = setTimeout(timer1, 1000);
  } else {
    data.time = 0;
    data.btnText = "发表留言";
    data.canGet = false;
    clearTimeout(data.timer);
  }
};
function findmsg() {
  axios.get(URL() + "/msg/findMsg").then((item) => {
    // console.log(item.data);
    if (item.data.code === 20000) {
      item.data.data.forEach((element) => {
        element.createdAt = fn(element.createdAt);
      });
      data.arrMsg = item.data.data.sort((a, b) => {
        return new Date(b.createdAt) - new Date(a.createdAt);
      });
    }
  });
}
onMounted(() => {
  findmsg();
  //   console.log(props.book);
});
const sendMsg = () => {
  axios
    .post(URL() + "/msg/addMsg", {
      name: data.netname,
      content: data.msg,
    })
    .then((item) => {
      if (data.netname && data.msg) {
        if (item.data.code === 20000) {
          // console.log(item.data);
          data.msg = "";
          data.netname = "";
          getCode();
          ElMessage({
            showClose: true,
            message: item.data.message,
            type: "success",
          });
          findmsg();
        }
      } else {
        ElMessage({
          showClose: true,
          message: item.data.message,
          type: "error",
        });
      }
    });
};
</script>

<style lang="scss" scoped>
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .el-input {
    // margin-right: 10px;
    width: 60%;
    margin: 5px;
  }
}

.messages {
  position: relative;
  display: flex;
  // justify-content: center;
  align-items: center;
  padding: 5px 10px;
  margin-top: 10px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
//   background-color: #f4f4f5c5;
  .el-button {
    margin-left: 90px;
  }
  .name {
    font-size: 12px;
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  h4 {
    width: 290px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  span {
    margin-right: 10px;
  }
  span:nth-child(4) {
    position: absolute;
    right: 10px;
    font-size: 12px;
  }
}
</style>